<template>
  <div class="page-content" :class="{ h: props.noZoom }">
    <div class="speed" :style="'transform: scale(' + props.zoomRatio + ');'">
      <img src="/images/layouts/ksjr.png" />
      <div class="desc">
        <p>入驻甬易平台，助力合作伙伴及商户实现安全合规的一站式服务。</p>
        <p>
          入驻须知：企业或个体商家均可申请；需准备营业执照并且提供店铺门头照片。
        </p>
      </div>
      <div class="btn">
        <NuxtLink to="/register">快捷接入</NuxtLink>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  zoomRatio: { type: Number, default: 1 },
  noZoom: { type: Boolean, default: false },
});
</script>

<style lang="scss" scoped>
.page-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("/images/index/footer-bg.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  height: 48%;
  &.h {
    height: 435px;
  }
}
.speed {
  overflow: hidden;
  text-align: center;
  img {
    display: block;
    margin: 0 auto 15px auto;
  }
  .desc {
    width: 858px;
    margin: 5px auto 0 auto;
    p {
      font-weight: 350;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      line-height: 23px;
    }
  }
  .btn {
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    width: 181px;
    height: 47px;
    background: rgba(112, 118, 140, 0.5);
    border-radius: 0px 0px 0px 0px;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 33px auto 0 auto;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease-in-out;
    &:hover {
      background-color: rgba(255, 255, 255, 0.08);
      &::after {
        transform: translateX(10px);
      }
    }
    &::after {
      content: "";
      display: block;
      transition: transform 0.3s ease-in-out;
      position: absolute;
      right: -40px;
      width: 79px;
      height: 15px;
      background-image: url("/images/layouts/more-btn-arrow.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      z-index: 1;
    }
    a {
      font-weight: 500;
      font-size: 17px;
      color: #ffffff;
    }
  }
}
</style>
